<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/question.css" />
<link rel="stylesheet" type="text/css" href="css/welcome.css" />
<script type="text/javascript" src="lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="JsonConvert.js"></script>

<title>太平洋保险IIHP测试</title>
</head>
<body>
	<script type="text/javascript">
	var question_all;
	var totalpage = 0;
	var pageNum = 3; //默认每页显示一条数据
	var userId = "";
	var pageIndex = 1;//默认显示第一页
	
	$(function(){
		userId = $("#userId").val();
		if(userId == null || userId == "" || userId == "null"){
			alert("系统未找到您的工号，请联系管理员！");
			history.go(-1);
		}
		
		//load data from Server
		loadJsonDataFromServer();
    });
	
	//load data from Server
	function loadJsonDataFromServer(){
		 $.post("LoadDataServlet.action", {
			"query" : "select  t.SNO,t.QUESTION_DL,t.QUESTION_NO,t.QUESTION_ATTRI_DESC,t.OPTION_NO,t.OPTION_XX,t.OPTION_DETAIL,t.INPUT_TYPE,t.VERSION from T_EA_QUESTION_INFO t where t.VERSION = (select a.VALUE1 from T_EA_cfg_INFO a where a.TYPE = 'newversion') order by t.SNO"
		}, function(data, status) {
			//data is JSON Array Format Text
			showDetail(data);
		});//end post
	}
	
	//将后台读取上来的数据转换成页面上一个个问题了
	function showDetail(jsonText){
		
		//convert Json text to Object
		question_all = convertToObject(jsonText);//调用JsonConvert.js中的转换方法

		//所有问题
		var question = "";
		//选项长度，根据这个长度动态列出选项
		var optionLength = 0;
		//选项长度中间值
		var middle = 0;
		//当前遍历问题数量的计数
		var curQuestPageNum = 0;
		//var questionIndex = 0;//题目、选项index
		//根据page_num建立分页循环
		if(question_all != null && question_all.question_dls != null && question_all.question_dls.length > 0){
			/* //得到总题数
			for(var h = 0; h < question_all.question_dls.length; h++){
				totalLength += question_all.question_dls[h].questions.length;
			} */
			
			for(var h = 0; h < question_all.question_dls.length; h++){
				var pageIndexInDL = 1;
				//todo div page start 
				question += "<div class='pags' id='page"+new Number(curQuestPageNum+1)+"'><div class='qdl' id='questDL'>"+question_all.question_dls[h].desc+"</div><div class='sod'></div>";
				for(var i = 0; i < question_all.question_dls[h].questions.length; i++){
					//问题
					question += "<div class='quets'>"+ question_all.question_dls[h].questions[i].no +"：&nbsp;" + question_all.question_dls[h].questions[i].question_attri_desc+"</div>";
					//选项
					question += "<div class='opts'><table width='45%' >"; //</table><table width='45%' ></table></div>
					//id值递增保证问题、选项id不重复
					//questionIndex ++;
					optionLength = question_all.question_dls[h].questions[i].options.length;
					
					if(optionLength <= 5){
						middle = optionLength;
					}else{
						//向上取整，有小数则整数部分加1
						middle = Math.ceil(optionLength/2);
					}
					//左侧选项
					for(var j = 0;j < middle ; j ++){
						//单选按钮
						if(question_all.question_dls[h].questions[i].input_type == "单选"){
							question += "<tr><td  valign='middle' width='20px'><input type='radio' name='" + question_all.question_dls[h].questions[i].no + "' value='"  + question_all.question_dls[h].questions[i].options[j].no + "'/></td><td><span>" + question_all.question_dls[h].questions[i].options[j].xx +"："+ question_all.question_dls[h].questions[i].options[j].detail + "</span></td></tr>";
						}
						//多选按钮
						else if (question_all.question_dls[h].questions[i].input_type == "多选"){
							question += "<tr><td  valign='middle' width='20px'><input type='checkbox' name='" + question_all.question_dls[h].questions[i].no + "' value='"  + question_all.question_dls[h].questions[i].options[j].no + "'/></td><td><span>" + question_all.question_dls[h].questions[i].options[j].xx +"：" + question_all.question_dls[h].questions[i].options[j].detail + "</span></td></tr>";
						}
					}
					question += "</table>";
					//右侧选项 (如果大于5条数据则分2列显示)
					if(optionLength > middle){
						question += "<table width='45%' >";
						for(var k = middle; k < optionLength ; k++){
							//单选按钮
							if(question_all.question_dls[h].questions[i].input_type == "单选"){
								question += "<tr><td  valign='middle' width='20px'><input type='radio' name='" + question_all.question_dls[h].questions[i].no + "' value='"  + question_all.question_dls[h].questions[i].options[k].no + "'/></td><td><span>" + question_all.question_dls[h].questions[i].options[k].xx +"：" + question_all.question_dls[h].questions[i].options[k].detail + "</span></td></tr>";
							}
							//多选按钮
							else if (question_all.question_dls[h].questions[i].input_type == "多选"){
								question += "<tr><td  valign='middle' width='20px'><input type='checkbox' name='" + question_all.question_dls[h].questions[i].no + "' value='"  + question_all.question_dls[h].questions[i].options[k].no + "'/></td><td><span>" + question_all.question_dls[h].questions[i].options[k].xx +"：" + question_all.question_dls[h].questions[i].options[k].detail + "</span></td></tr>";
							}
						}
						question += "</table>";
					}
					question += "</div>";
					
					//结束当前页，并且判断 如果i是最后一个元素，则结束这一页
					if(pageIndexInDL*pageNum == i +1 || i == question_all.question_dls[h].questions.length -1){
						question += "</div>";
						//全局问题页数，每个问题结束算一页
						curQuestPageNum++;
						//判断 如果i不是最后一个元素，则新起一页
						if( i < question_all.question_dls[h].questions.length -1){
							//此为每一类的页数
							pageIndexInDL++;
							question += "<div class='pags' id='page"+new Number(curQuestPageNum+1)+"'><div class='qdl' id='questDL'>"+question_all.question_dls[h].desc+"</div><div class='sod'></div>";
						}
					}
					//question += "<div class='sod'></div>";
				}
			}
			totalpage = curQuestPageNum;
			$("#totalIndex").html(totalpage);
			$("#curIndex").html(1);
			$("#quets").html(question);
			//默认显示第一页问题
			$("#page"+ pageIndex).css("display","block");
			//$("#options"+question_all.current_index).css("display","block");
		}
		/* var questions = find;
		
			<div> <p> questions.quesion_dl[0].quesion[0].quesion_desc
			for()
			<p> questions.quesion_dl[0].quesion[0].option[0].
			<br>questions[1].question_desc<br>
			<br>questions[1].option[1] */
	}
	

		
		function nextStep(){
			if(userId == null || userId == "" || userId == "null"){
				alert("系统未找到您的工号，无法进行下一步！");
				return;
			}
			var index = pageIndex;
			if(totalpage == 0 ){
				alert("没有问题无法进行下一步！");
				return;
			}
			var isPass = true;
			$("#page"+ index +">.opts").each(function(){
				//当一道题目中没有一道题被选中则不能进行下一步
				if($(this).find("input:checked").length == 0){
					isPass = false;
					//alert("题号：" + $($(this).find("input")[0]).attr("name") + "还未选择，必须回答本页所有问题才能进行下一步操作！");
				}
			});
			if(isPass == false){
				alert("您还有问题未回答完毕，必须回答本页所有问题才能进行下一步操作！");
				return;
			}
			/* if(){
				
			} */
			if(totalpage == index){
				$("#questions,#infom").css("display","none");
				$("#endSub").css("display","block");
				//显示结束界面
			}else{
				pageIndex = index+1;
				//显示当前需要显示的问题
				$("#page"+ index).css("display","none");
				$("#page"+ pageIndex).css("display","block");
				$("#curIndex").html(pageIndex);
			}
			
		}
		
		function bStep(){
			var index = pageIndex;
			if(index == 1){
				//显示个人信息
				$("#questions,#endSub").css("display","none");
				$("#infom").css("display","block");
			}else{
				pageIndex =index - 1;
				//显示当前需要显示的问题
				$("#page"+ index).css("display","none");
				$("#page"+ pageIndex).css("display","block");
				$("#curIndex").html(pageIndex);
			}
		}
		
		function endStep(){
			$("#questions").css("display","block");
			$("#endSub,#infom").css("display","none");
		}
		
		
		function endSubmit(){
			if(question_all != null && question_all.question_dls != null && question_all.question_dls.length > 0){
				if(userId == null || userId == "" || userId == "null"){
					alert("系统未找到您的工号，无法进行下一步！");
					return;
				}
				var answerStr = "";
				var time = "16:56:30";
				var name = $("#name").val();
				var empno = $("#empno").val();
				var recommend_name = $("#empname").val();
				var year = $("#year").val();
				var card = $("#card").val();
				var phone = $("#phone").val();
				var six = $("#six").val();
				
				//题目大类
				for(var i = 0; i < question_all.question_dls.length; i++){
					//alert(question_all.question_dls[i].questions.length);
					//题目
					for(var j = 0; j < question_all.question_dls[i].questions.length; j++){
						
						//根据题目no查找选项选中值
						if(question_all.question_dls[i].questions[j].input_type == "单选"){
							answerStr += $("input[name='"+question_all.question_dls[i].questions[j].no+"']:checked").val() + "$" + time + "|";
						}
						else if(question_all.question_dls[i].questions[j].input_type == "多选"){
							$("input[name='"+question_all.question_dls[i].questions[j].no+"']:checked").each(function(){
								answerStr += $(this).val() + "$" + time + "|";
							});
						}
					}
				}
				if(answerStr.substring(answerStr.length-1, answerStr.length) == "|"){
					answerStr = answerStr.substring(0, answerStr.length-1);
				}
				//alert(answerStr);
				var parm = {
	                    "procedure" : "pro_ea_get_person_info",
	                    "id" : card,
	                    "name" : name,
	                    "phone" : phone,
	                    "sex" : six,
	                    "birth_date" : year,
	                    "empno" : userId,
	                    "recommend_name":recommend_name,
	                    "recommend_no" : empno,
	                    "question_str" : answerStr,
	                    "version" : question_all.version
	             };
				$.post("ProcedureServlet.action", parm,
                    function(data, status) {
						if(data != null  && data == "Y"){
							alert("您的测试已完成，系统将回到初始欢迎页面！");
							window.location.href = "welcome.jsp?userId=" + userId;
						}else{
							alert("测试失败，原因为：" + data);
						}
                });
			}
		}
		
		function checkInfo(){
			var name = $("#name").val();
			var empname = $("#empname").val();
			var year = $("#year").val();
			var card = $("#card").val();
			var phone = $("#phone").val();
			
			if(name == null || name == ""){
				alert("请输入您的姓名！");
				return;
			}
			if(year == null || year == ""){
				alert("请输入生日日期！");
				return;
			}
			var reg = /^(\d{18,18}|\d{15,15}|\d{17,17}x)$/;
			if(reg.test(card.toLowerCase()) == false){
				alert("请输入正确格式的身份证！");
				return;
			}
			reg = /^1\d{10}$/;
			if(reg.test(phone) == false){
				alert("请输入正确格式的手机号！");
				return;
			}
			if(empname == null || empname == ""){
				alert("请输入推荐人姓名！");
				return;
			}
			if(userId == null || userId == "" || userId == "null"){
				alert("系统未找到您的工号，无法进行下一步！");
				return;
			}
			$("#questions").css("display","block");
			$("#endSub,#infom").css("display","none");
		}
		
	</script>
	<div class="glob" id="questions" style="display:none;">
		<div class="title"><span class="titlF">太平洋保险IIHP测试</span></div>
		
		<!-- 此处循环遍历 -->
		<div class="quetions" id="quets">
			
		</div>
		<div class="butnDiv" style="margin-top:10px">
			<input class="butn" type="button" value="上一步>>" onclick="bStep()"/>&nbsp;&nbsp;&nbsp;<p style="display:inline;"><span id="curIndex"></span>/<span id="totalIndex"></span></p>&nbsp;&nbsp;&nbsp;<input class="butn" type="button" value="下一步>>" onclick="nextStep()"/>
		</div>
	</div>
	<div class="global" id="endSub" style="display:none;">
		<div class="titl"><span class="titlFo">太平洋保险IIHP测试</span></div>
		<div class="abs"><span >结束</span></div>
		<div class='sod'></div>
		<div class="endCon">
			<div class="con"><span >感谢您的参与！全部问题已经回答完毕。</span></div>
			<div class="con" style="font-weight:bold; margin:25px auto 5px auto;"><span>问卷提交之后将不能对已提交问卷进行任何修改，</span></div>
			<div class="con" style="font-weight:bold; margin:0 auto 25px auto;"><span>如需对答案进行修改，请点击【上一步】至所需修改的题目页面进行修改。</span></div>
			<div class="con"><span >确认无误后，请点击提交按钮提交问卷。</span></div>
		</div>
		<div class="con" style="margin-top:10px">
			<input class="butt" type="button" value="上一步" onclick="endStep()"/>
			<input class="butt" type="button" value="提交" onclick="endSubmit()"/>
		</div>
	</div>
	<div class="global" id="infom">
		<div class="titl"><span class="titlFo">太平洋保险IIHP测试</span></div>
		<div class="abs"><span >个人基本信息</span></div>
		<div class='sod'></div>
		<div class="tabDiv">
			<table align="center">
				<!-- <tr><td>测试号：</td><td><input class="tex" type="text"/></td><td></td><td></td></tr> -->
				<tr><td align="right"><font color="red">*</font>姓名：</td><td><input id="name" class="tex" type="text" maxLength="20"/></td></tr>
				<tr><td align="right"><font color="red">*</font>性别：</td>
				<td>
					<select id="six" class="loTex">
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
				</td></tr>
				<tr>
					<td align="right"><font color="red">*</font>出生日期：</td>
					<td align="right"><input class="tex" id="year" type="text" onclick="WdatePicker();" maxLength="20"/></td>
					<!-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id="month" class="loTex" type="text"/></td>
					<td align="right">&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;<input class="loTex" id="days" type="text"/></td><td>&nbsp;&nbsp;&nbsp;&nbsp;日</td> -->
				</tr>
				<tr><td align="right"><font color="red">*</font>身份证号码：</td><td><input id="card" class="tex" type="text" /></td></tr>
				<tr><td align="right"><font color="red">*</font>手机号码：</td><td><input id="phone" class="tex" type="text" /></td></tr>
				<tr><td align="right"><font color="red">*</font>举荐人姓名：</td><td><input id="empname" class="tex" type="text" maxLength="20"/></td></tr>
				<tr><td align="right">举荐人工号：</td><td><input id="empno" class="tex" type="text" maxLength="20"/></td></tr>
			</table>
		</div>
		<div class="con" style="margin-top:10px">
			<input class="butt" type="button" onclick="checkInfo();" value="下一步"/>
		</div>
	</div>
	<input type="hidden" id="userId" value="<%=request.getParameter("userId")%>"/>
</body>
</html>